<template>
  <Designer ref="ddesigner">
    <template v-slot:header>
      <div class="design-name">{{ state.name }}</div>
      <div class="design-actions">
        <el-button @click="handleSubmit" type='primary' size="mini">保存</el-button>
        <el-button @click="handleBack" size="mini">返回列表</el-button>
      </div>
    </template>
  </Designer>
</template>

<script>
import Designer from './designer.vue'
import { objecter, parser } from '@daelui/dogjs/dist/components'
import { zh as locale } from '@daelui/dogjs/dist/locale'
import { state, setter } from '@/service/stock/index'
import pageSer from '../../../service/action/viewpage.action'
import vcSer from '@/service/action/viewcomp.action'

export default {
  components: {
    Designer
  },

  data () {
    return {
      isEdit: false, // 是否是编辑模式
      // 表单数据
      state: {
        id: '',
        pid: '',
        name: '',
        meta: {},
        layout: '',
        description: '',
        status: 1,
        order: 1,
        updateTime: '',
        updateUser: '',
        createTime: '',
        createUser: ''
      }
    }
  },

  methods: {
    /**
     * @function 加载数据
    */
    loadItem (id) {
      pageSer.queryItem({ id }).then(result => {
        let data = result.data || {}
        // 组件元数据
        let meta = parser.parse(data.meta) || {
          component: 'div',
          name: data.layout || '',
          properts: {},
          layout: {},
          events: {},
          resource: {},
          theme: {},
          childComponents: []
        }
        meta.childComponents = meta.childComponents || []
        data.meta = meta
        this.state = data
        state.page = data
      })
    },

    /**
     * @function 提交
    */
    handleSubmit () {
      let defer = null
      let state = objecter.clone(this.state)
      // 页面元数据
      state.meta = this.getMetaValue()
      state.meta = parser.stringify(state.meta)
      // 编辑
      if (this.isEdit) {
        defer = pageSer.editItem(state)
      } else { // 添加
        defer = pageSer.addItem(state)
      }
      defer.then(result => {
        if (result.success) {
          this.$message({
            message: locale.action.success,
            type: 'success'
          })
        } else {
          this.$message({
            message: locale.action.fail,
            type: 'error'
          })
        }
        // 添加则回到列表页
        if (!this.isEdit) {
          this.$router.push(this.getMicroRoute('/dview/page/list'))
        }
      })
    },

    /**
     * @function 获取元数据
    */
    getMetaValue () {
      return this.$refs.ddesigner.getMetaValue()
    },

    /**
     * @function 返回
    */
    handleBack () {
      this.$router.push(this.getMicroRoute('/dview/page/list'))
    }
  },

  beforeMount () {
    // 查询所有视图组件
    vcSer.queryAllComponents().then(cps => {
      setter.setComponentCollection(cps)
    })
  },

  mounted () {
    let params = this.$route.params
    // 新建
    if (!params.id) {
      this.isEdit = false
    } else { // 编辑
      this.isEdit = true
      this.loadItem(params.id)
    }
  }
}
</script>

<style lang="less" scoped>

</style>

<style lang="less">

</style>
